<template>

  <view class="modal" v-show="newVisible">

    <view class="modal-content">

      <view class="modal-header">

        <h2>{{isGroup?'分组设置':'选项设置'}}</h2>

        <i class="fa fa-times" @click="closeModal"></i>

      </view>

      <view class="modal-body" >
		<view v-show="!isGroup">
			<block v-for="(item, index) in items" :key="item.value">
				<span v-show="item.value == 2?show:true">
					<label class="uni-list-cell uni-list-cell-pd">
						<view class="min-switch" >
						  <text class="text">{{item.name}}</text>
						  <switch
							:checked="item.checked"
							color="#80b156"
							style="transform: scale(0.7,0.7)"
							@change="open"
							:data-index="item.value"
						  />
						</view>
						<!-- <view v-if="index<items.length-1" class="Divider" /> -->
					</label>
				</span>
			</block>
		</view>
			
			<checkbox-group @change="checkboxChange" v-show="isGroup">
				<label class="checkBox" v-for="(item,index) in optionData" :key="index">
					<view>
						<checkbox :value="item.content" :checked="item.checked"/>
						<span>{{item.content}}</span>
					</view>
				</label>
			</checkbox-group>

      </view>

      <view class="modal-footer">

        <button type="button" @click="submit">确定</button>

        <button type="button" @click="closeModal">取消</button>

      </view>

    </view>

  </view>

</template>

<script>
	import {empty} from "@/uni_modules/uv-ui-tools/libs/function/test.js"
	export default {
	
	  data() {
	
	    return {
			show:false,
			newVisible:false,
			items:[],
			isGroup:false,	// 是否为分组选项
			optionData:[]	,// 分组需要的选项数据
			temOptionData:[]	// 分组需要的选项数据
	    }
	
	  },
		watch:{
			items:{
				handler(newvalue){
					if(this.items[1].checked == true){
						this.show = true
					}else{
						this.show = false
						this.items[2].checked = false
					}
				},
				deep: true
			}
		},
	  methods: {
	
	    showModal(type,data) {
			if(typeof(type) == "string"){
				console.log(data);
				this.isGroup = true
				var optionArray = this.$parent.optionArray
				var groupArray = this.$parent.groupingArray
				console.log(1,optionArray);
				console.log(2,groupArray);
				var myGroup = [] //我的分组数据
				var otherGroup = [] //其他组的数据
				var resultData = []	//最终剩下的数据
				for (var i = 0; i < groupArray.length; i++) {
					if(groupArray[i].id !== data){
						groupArray[i].optionData.forEach(item=>{
							otherGroup.push(item)
						})
					}else{
						groupArray[i].optionData.forEach(item=>{
							myGroup.push(item)
						})
					}
				}
				console.log(3,myGroup);
				console.log(4,otherGroup);
				var tem = optionArray
				// 去除已被选择的选项
				if(!empty(otherGroup)){
					otherGroup.forEach((item) => {
						tem.forEach(i => {
							if(item == i.content){
								i.flag = true
							}
						})
					})
				}
				resultData = tem.filter((item) => {
					return !item.flag
				});
				if(!empty(myGroup)){
					myGroup.forEach(item=>{
						resultData.forEach((res,index)=>{
							if(item == res.content){
								resultData.splice(index,1)
							}
						})
					})
					console.log(myGroup);
					console.log(resultData);
					myGroup.forEach(item=>{
						let data = {
							content:item,
							id:empty(resultData)?0:resultData[resultData.length-1].id + 1,
							moreUpdata:[],
							nextTitleId:""
						}
						resultData.push(data)
					})
				}
				console.log(resultData);
				// // 将我的分组进行勾选状态
				resultData.forEach(item=>{
					myGroup.forEach(res=>{
						if(res == item.content){
							item['checked'] = true
						}else{
							item['checked'] = false
						}
					})
				})
				this.optionData = resultData
			}else{
				if(data.length){
					this.items = data
				}else{
					this.items = [
									{
										value:0,
										checked:false,
										name:'允许记分',
									},
									{
										value:1,
										checked:false,
										name:'允许填空',
									},
									{
										value:2,
										checked:false,
										name:'填空必答',
									}
								]
				}
				this.isGroup = false
			}
	      this.newVisible = true;
	
	    },
	
	    closeModal() {
	      this.newVisible = false;
	
	    },
	
	    submit() {
			if(this.isGroup){
				this.$emit('Group',this.temOptionData)
			}else{
				this.$emit('change',this.items)
			}
	
	      this.closeModal();
	
	    },
		open(e){
			let index = e.currentTarget.dataset.index
			for (var i = 0; i < this.items.length; i++) {
				if(this.items[i].value == index){
					this.items[i].checked = e.detail.value
				}
			}
		},
		checkboxChange(e){
			this.temOptionData = e.detail.value
		}
	
	  }
	
	}
</script>

<style>
	.Divider {
	  border-top: 1px solid #eee;
	  border-bottom: 1px solid #eee;
	}
.modal {

  position: fixed;

  left: 0;

  top: 0;

  z-index: 99999;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.7);

  display: flex;

  justify-content: center;

  align-items: center;

}

 

.modal .modal-content {

  width: 600rpx;

  background-color: #ffffff;

  border-radius: 10rpx;

  overflow: hidden;

}

 

.modal .modal-content .modal-header {

  background-color: #80b156;

  color: #ffffff;

  display: flex;

  justify-content: space-between;

  align-items: center;

  padding: 10rpx;


}

 

.modal .modal-content .modal-header h2 {

  margin-left: 200rpx;
}

 

.modal .modal-content .modal-header i {

  font-size: 20rpx;

  cursor: pointer;

}

 

.modal .modal-content .modal-body {

  padding: 20rpx;

}

 

.modal .modal-content .modal-footer {

  background-color: #eeeeee;

  padding: 10rpx;

  display: flex;

  justify-content: flex-end;

}

 

.modal .modal-content .modal-footer button {

  border: none;

  padding: 10rpx 20rpx;

  margin-left: 80rpx;

  border-radius: 5rpx;

  cursor: pointer;

}

 

.modal .modal-content .modal-footer button:first-child {

  background-color: #80b156;

  color: #ffffff;

}

 

.modal .modal-content .modal-footer button:last-child {

  background-color: #dddddd;

  color: #333333;

}

.checkBox{
	display: inline-block;
	margin: 20rpx;
}

</style>
